<template>
  <view class="content">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link back" >
              <i class="icon f7-icons arrow-back">arrow_left</i>
            </a>
          </div>
          <div class="title" style="margin-left: -50rpx">详情</div>
          <div class="right">

          </div>
        </div>
      </div>
      <div class="page-content">
        <div class="movie-header">
          <img src="/static/img/movies/poster.jpg" alt="" class="movie-cover">
          <div class="movie-infos">
            <div class="movie-block">
              <i class="icon f7-icons">tickets_fill</i>
              <div class="movie-block-name">游玩时间</div>
              <div class="movie-block-text">2h</div>
            </div>
            <div class="movie-block">
              <i class="icon f7-icons">clock_fill</i>
              <div class="movie-block-name">大小</div>
              <div class="movie-block-text">200MB</div>
            </div>
            <div class="movie-block">
              <i class="icon f7-icons">star_fill</i>
              <div class="movie-block-name">Rating</div>
              <div class="movie-block-text">4.2/5</div>
            </div>
          </div>
        </div>
        <h1>Moonlight (2023)</h1>
        <p>Moonlight is a hauntingly beautiful film that is set to captivate audiences. With stunning visuals and a
          talented
          cast, Moonlight is a must-see film that leaves a lasting impression on all who watch it.</p>
        <h2>Synopsis</h2>
        <p>
          Chiron grows up in a Miami neighborhood plagued by crime and drug addiction. His single mother, Paula, is
          neglectful and addicted to crack. Bullied and withdrawn, Chiron finds guidance from Juan, a drug dealer, and
          his
          girlfriend, Teresa, who
          offer him a safe haven from the chaos of his home life. As a teenager, Chiron faces peer pressure and tough
          decisions that may determine his future, but with Juan's guidance, he learns to make choices for himself.
        </p>
        <a style="position: fixed;bottom: 20px;z-index: 9999;margin: 0px auto;width: 90vw" href="#" class="link link-banner link-chevron bg-color-dark bg-color-black netflix-banner">
          <img src="/static/img/icons/netflix.png" alt="">
          <div class="link-banner-text">
            <div class="link-banner-title">下载此游戏</div>
          </div>
        </a>
        <h2>Casting</h2>
        <div class="casting">
          <div class="grid grid-cols-4 grid-gap">
            <div>
              <img src="/static/img/avatars/11.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Emma</div>
              <div class="actor-lastname">Hemsworth</div>
            </div>
            <div>
              <img src="/static/img/avatars/2.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Kevin</div>
              <div class="actor-lastname">Jordan</div>
            </div>
            <div>
              <img src="/static/img/avatars/10.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Viola</div>
              <div class="actor-lastname">Dujardin</div>
            </div>
            <div>
              <img src="/static/img/avatars/4.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Chris</div>
              <div class="actor-lastname">Stone</div>
            </div>
          </div>
          <div class="grid grid-cols-4 grid-gap">
            <div>
              <img src="/static/img/avatars/5.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Anthony</div>
              <div class="actor-lastname">Ronan</div>
            </div>
            <div>
              <img src="/static/img/avatars/6.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Daniel</div>
              <div class="actor-lastname">Kaluuya</div>
            </div>
            <div>
              <img src="/static/img/avatars/3.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Mike</div>
              <div class="actor-lastname">Franco</div>
            </div>
            <div>
              <img src="/static/img/avatars/9.jpg" alt="" class="actor-image">
              <div class="actor-firstname">Jessica</div>
              <div class="actor-lastname">Kaluuya</div>
            </div>
          </div>
        </div>
        <h2>Trailer</h2>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/5jY1ecibLYo?controls=0"
                title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        <h2 class="list-title">Distribution</h2>
        <div class="list simple-list list-outline list-dividers full-width movie-distribution">
          <ul>
            <li>
              <div class="item-inner">
                <div class="item-title">Director</div>
                <div class="item-after">Ava Martinez</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Producer</div>
                <div class="item-after">Ethan Bishop</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Screenwriter</div>
                <div class="item-after">Lauren Reynolds</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Cinematographer</div>
                <div class="item-after">Tyler Johnson</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Editor</div>
                <div class="item-after">Sophia Lee</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Production Designer</div>
                <div class="item-after">Lucas Taylor</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Costume Designer</div>
                <div class="item-after">Olivia Wright</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Composer</div>
                <div class="item-after">Noah Patel</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Sound Designer</div>
                <div class="item-after">Benjamin Nguyen</div>
              </div>
            </li>
            <li>
              <div class="item-inner">
                <div class="item-title">Lead Actor</div>
                <div class="item-after">Lucas Brooks</div>
              </div>
            </li>
          </ul>
        </div>
        <h2>Rating (IMDb)</h2>
        <div class="rating-block-detailed movie-rating">
          <div class="rating-block-group">
            <div class="rating-block-individual">
              <div class="rating-block-star">
                5
                <i class="icon f7-icons color-yellow">star_fill</i>
              </div>
              <span data-progress="88" class="progressbar color-yellow rating-block-bar"></span>
              <div class="rating-block-percentage">88%</div>
            </div>
            <div class="rating-block-individual">
              <div class="rating-block-star">
                4
                <i class="icon f7-icons color-yellow">star_fill</i>
              </div>
              <span data-progress="47" class="progressbar color-yellow rating-block-bar"></span>
              <div class="rating-block-percentage">47%</div>
            </div>
            <div class="rating-block-individual">
              <div class="rating-block-star">
                3
                <i class="icon f7-icons color-yellow">star_fill</i>
              </div>
              <span data-progress="20" class="progressbar color-yellow rating-block-bar"></span>
              <div class="rating-block-percentage">20%</div>
            </div>
            <div class="rating-block-individual">
              <div class="rating-block-star">
                2
                <i class="icon f7-icons color-yellow">star_fill</i>
              </div>
              <span data-progress="8" class="progressbar color-yellow rating-block-bar"></span>
              <div class="rating-block-percentage">8%</div>
            </div>
            <div class="rating-block-individual">
              <div class="rating-block-star">
                1
                <i class="icon f7-icons color-yellow">star_fill</i>
              </div>
              <span data-progress="3" class="progressbar color-yellow rating-block-bar"></span>
              <div class="rating-block-percentage">3%</div>
            </div>
          </div>
        </div>
        <h2 class="title-bottom-line">
          Comments
          <span class="badge color-dark comment-count">23</span>
        </h2>
        <div class="comment-list">
          <div class="comment">
            <img src="/static/img/avatars/3.jpg" alt="">
            <div class="comment-infos">
              <div class="comment-header">
                <div class="comment-header-left">
                  <div class="author-name">Noah Campbell</div>
                  <div class="comment-date">• 12m</div>
                </div>
                <div class="comment-options">
                  <a href="#" class="link"><i class="icon f7-icons">ellipsis_vertical</i></a>
                </div>
              </div>
              <div class="comment-text">This movie blew me away! The acting was superb and the plot kept me on the edge
                of
                my seat the entire time.
              </div>
            </div>
          </div>
          <div class="comment">
            <img src="/static/img/avatars/6.jpg" alt="">
            <div class="comment-infos">
              <div class="comment-header">
                <div class="comment-header-left">
                  <div class="author-name">Mia Sullivan</div>
                  <div class="comment-date">• 40m</div>
                </div>
                <div class="comment-options">
                  <a href="#" class="link"><i class="icon f7-icons">ellipsis_vertical</i></a>
                </div>
              </div>
              <div class="comment-text">I wasn't sure what to expect going into this film, but I was pleasantly
                surprised.
                It was a captivating story with great cinematography.
              </div>
            </div>
          </div>
          <div class="comment comment-reply">
            <img src="/static/img/avatars/2.jpg" alt="">
            <div class="comment-infos">
              <div class="comment-header">
                <div class="comment-header-left">
                  <div class="author-name">Liam Evans</div>
                  <div class="comment-date">• 13m</div>
                </div>
                <div class="comment-options">
                  <a href="#" class="link"><i class="icon f7-icons">ellipsis_vertical</i></a>
                </div>
              </div>
              <div class="comment-text">Exactly! I loved everything about this movie - the characters, the dialogue, and
                the
                soundtrack. It's a must-see!
              </div>
            </div>
          </div>
          <div class="comment">
            <img src="/static/img/avatars/4.jpg" alt="">
            <div class="comment-infos">
              <div class="comment-header">
                <div class="comment-header-left">
                  <div class="author-name">William Taylor</div>
                  <div class="comment-date">• 2h</div>
                </div>
                <div class="comment-options">
                  <a href="#" class="link"><i class="icon f7-icons">ellipsis_vertical</i></a>
                </div>
              </div>
              <div class="comment-text">I was skeptical at first, but this movie exceeded all of my expectations. The
                twists
                and turns in the plot kept me guessing until the very end.
              </div>
            </div>
          </div>
          <div class="comment">
            <img src="/static/img/avatars/5.jpg" alt="">
            <div class="comment-infos">
              <div class="comment-header">
                <div class="comment-header-left">
                  <div class="author-name">Ethan Jameson</div>
                  <div class="comment-date">• 1d</div>
                </div>
                <div class="comment-options">
                  <a href="#" class="link"><i class="icon f7-icons">ellipsis_vertical</i></a>
                </div>
              </div>
              <div class="comment-text">This film was an emotional rollercoaster. I laughed, I cried, and I felt
                completely
                invested in the characters. Highly recommend!
              </div>
            </div>
          </div>
        </div>
        <h2 class="title-bottom-line">Leave a Comment</h2>
        <form>
          <div class="grid grid-cols-2 grid-gap no-margin">
            <input type="text" id="name" name="name" placeholder="Your Name">
            <input type="email" id="email-2" name="email-2" placeholder="Your Email">
          </div>
          <textarea placeholder="Your comment here" id="comment"></textarea>
          <a href="#" class="button button-fill button-round color-dark">Send</a>
        </form>
      </div>
    </div>

  </view>
</template>

<script setup lang="ts">

</script>


<style scoped>
.content {
  height: 100vh;
}
</style>
